<template>
	<div class="accountInfo">

		<el-row>
			<el-col :span="24">
				<div class="top_bg">
					<div class="item_bg" style="border-bottom: 1px solid #f2f4fa">
						<div class="item">
							<span>实体账户户名：{{totalAccount.accountName}}</span>
						</div>
						<div class="item">
							<span>实体账户账号：{{totalAccount.accountNo}}</span>
						</div>
					</div>
					<div class="item_bg">
						<div class="item">
							<span>电子账户户名：{{totalAccount.baseAcctName}}</span>
						</div>
						<div class="item">
							<span>电子账户账号：{{totalAccount.baseAcctNo}}</span>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>

		<el-row style="border-top: 1px solid #f2f4fa; margin-top: 15px;height: 120px; background: rgb(245, 247, 250);">
			<el-col :span="24">
				<div class="bl-moeny">
					<div class="my-v1">
						<div class="v1-top">
							可用余额
							<span style="cursor: pointer;" @click="switchVisible2">{{!numberVisible2 ?'显示金额':'隐藏余额'}}</span>
						</div>
						<div class="v1-info">
							¥{{ numberVisible2 ? (totalAccount.balance||'0.00') :`****`}}
						</div>
					</div>
					<div class="my-v2">
						<div @click="handleWithdrawal" style="cursor: pointer;" class="v1-top">
              提现中金额 >
						</div>
						<div class="v1-info">
							¥{{totalAccount.withdrawalAmount ||'0.00'}}
						</div>
					</div>
					<div class="my-v2">
						<div class="v1-top">
              在途资金
						</div>
						<div class="v1-info">
							¥{{totalAccount.frozenBalance ||'0.00'}}
						</div>
					</div>
				</div>
			</el-col>

		</el-row>
		<el-row :gutter="20">
		  <el-col :span="24">
		    <slot name="btns"></slot>
		  </el-col>
		</el-row>

	</div>
</template>

<script>
	export default {
		name: 'AccountInfo',
		props: {
			totalAccount: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				total: 0,
				numberVisible:false,
				numberVisible2:false,
			}
		},
    mounted() {
    },
		methods: {
			switchVisible(){
				this.numberVisible = !this.numberVisible;
			},
			switchVisible2(){
				this.numberVisible2 = !this.numberVisible2;
			},
			handleWithdrawal() {
				this.$emit('showWithdrawal')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.accountInfo {
		.el-row {
			line-height: 1.5;
			font-size: 16px;
		}

		.top_bg {
			width: 100%;

			.item_bg {
				display: flex;

				.item {
					width: 50%;
					line-height: 60px;
					font-size: 16px;
				}
			}
		}

		.bl-moeny {
			width: 100%;
			margin: 20px auto 0 auto;
			font-size: 14px;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			flex-direction: row;

			.my-v1 {
				flex: 1;
				border-right: 1px solid rgb(228, 233, 239);
			}

			.my-v2 {
				flex: 1;
				border-right: 1px solid rgb(228, 233, 239);
			}

			.v1-top {
				height: 40px;
				position: relative;
				padding-left: 30px;
				color: rgb(155, 155, 155);
			}

			.v1-top span {
				position: absolute;
				right: 20px;
				top: 0;
				font-size: 12px;
				color: #4a9ff9;
			}

			.v1-info {
				padding-left: 30px;
				color: balck;
				font-weight: bold;
			}

		}
	}
</style>
